<template>
  <view v-if="token" class="main">
    <!-- 头像区域 -->
    <view class="main-top">
      <image :src="userPic" class="avatar"></image>
      <view v-if="userData.nickName" class="nickname">{{ userData.nickName}}</view>
      <view v-else class="nickname">{{ userData.userName}}</view>
    </view>

    <!-- 内容区域 -->
    <view class="main-bottom">
      <navigator url="/pages/editUser/editUser">
        <view class="item">
          <uni-icons type="settings" size="25"></uni-icons>
          <text>编辑资料</text>
          <uni-icons class="item-icon" type="forward" size="25"></uni-icons>
        </view>
      </navigator>

      <view class="item" @click="replaceBgc">
        <uni-icons type="image-filled" size="25"></uni-icons>
        <text>更换封面</text>
        <uni-icons class="item-icon" type="forward" size="25"></uni-icons>
      </view>

      <view class="item" @click="signOut">
        <uni-icons type="close" size="25"></uni-icons>
        <text>退出登录</text>
        <uni-icons class="item-icon" type="forward" size="25"></uni-icons>
      </view>

    </view>
  </view>

  <!-- 注册登录页面 -->
  <view v-else>
    <login :userLoginData="userLoginData" @submit="submit" @addUser="addUser"></login>
  </view>

</template>

<script>
  import login from '../../components/login/login.vue'

  export default {
    data() {
      return {
        userLoginData: {
          userName: 'qqdl',
          passWord: '123456',
        },
        token: '',
        userData: {},
        // 用户头像
        userPic: '',
        imgArr:[]
      }
    },
    activated() {
      this.getUserInfo()
    },
    methods: {
      // 登录页提交
      async submit(userLoginData) {
        let {result:res} =await uniCloud.callFunction({
          name: "user_get_one",
          data: {
            userName: userLoginData.userName,
            passWord: userLoginData.passWord
          }
        })
        let resLen = res.data.length;
        if (resLen > 0) {
          uni.showToast({
            title: '登录成功'
          })
          this.token = res.data[0]._id
          uni.setStorageSync('token', this.token)
          this.getUserInfo()
        } else {
          uni.clearStorage()
          uni.showToast({
            icon: 'error',
            title: '用户信息有误'
          })
        }
      },
      // 退出登录
      signOut() {
        uni.showModal({
          content: "是否退出登录？",
          success: res => {
            if (res.confirm) {
              this.token = ''
              this.userData = {}
              try {
                uni.removeStorageSync('token');
              } catch (e) {}
            }
          }
        })
        try {
          uni.removeStorageSync('token');
        } catch (e) {
          throw e
        }
      },
      // 获取用户信息
      getUserInfo() {
        if (this.token) {
          uniCloud.callFunction({
            name: "user_get_info",
            data: {
              id: this.token
            }
          }).then(res => {
            this.userData = res.result.data[0];
            this.userPic = this.userData.userPic[0]
          })
        }
      },
      // 添加用户
      async addUser(userData) {
        const {
          result: res
        } = await uniCloud.callFunction({
          name: "user_search",
          data: {
            userName: userData.userName
          }
        })
        if (res.data.length > 0) {
          uni.showToast({
            icon: 'error',
            title: '用户名重复，请更换后尝试'
          })
        } else {
          uniCloud.callFunction({
            name: "user_add",
            data: {
              userName: userData.userName,
              passWord: userData.passWord
            }
          }).then(res => {
            uni.showToast({
              title: '注册成功'
            })

          })
        }
      },
      // 更换封面
      replaceBgc() {
        uni.chooseImage({
        	count: 1, //默认9

        	success: res=> {
            this.imgArr = res.tempFilePaths
            const bodyDom = document.querySelector('body')
            bodyDom.style.background = `no-repeat url(${this.imgArr[0]})`
            bodyDom.style.backgroundSize = "100vw 100vh";
            uni.showToast({
              title: '更换成功'
            })
        	}
        });
      }

    }
  }
</script>

<style lang="scss" scoped>
  .main {
    height: 100%;
    background-color: #F4F4F4;

    .main-top {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 600rpx;
      background-color: #067fcf;

      .avatar {
        width: 360rpx;
        height: 360rpx;
        border-radius: 50%;
        border: 4rpx solid #FFF;
        box-shadow: 0 2rpx 10rpx black;

      }

      .nickname {
        font-size: 32rpx;
        color: #FFF;
        font-weight: bold;
        margin-top: 20rpx;
      }
    }

    .main-bottom {

      padding-left: 10rpx;
      padding-right: 10rpx;
      background-color: #fff;

      .item {
        position: relative;
        width: 100%;
        height: 80rpx;
        border-bottom: 2rpx solid #b2b2b3;
      }

      .item>text {
        margin-left: 10rpx;
        line-height: 80rpx;
        vertical-align: middle;
        font-size: 30rpx;
      }

      .item-icon {
        position: absolute;
        right: 0;
      }
    }
  }

</style>
